<template>
    <div class="w_h_100 ">
        <div class="inlet">非融融批量代办 > <span class="size">项目信息</span></div>
        <div class="d_f m_t_10 index">
            <div class="left">
                <div class="box">
                    <div>客户资料卡</div>
                    <div class="d_f a_i_c m_t_20">
                        <div class="label ">客户名称：</div>
                        <div class="input d_f a_i_c">{{ information.customerName }}
                            <div class="success_status" v-if="information.customerStatus == 0">
                                <img src="../../../assets/normal.png" alt="" class="status_img">
                                <span>正常</span>
                            </div>
                            <div class="success_status" v-if="information.customerStatus == 1">
                                <img src="../../../assets/normal.png" alt="" class="status_img">
                                <span>在途</span>
                            </div>
                            <div class="pause_status" v-if="information.customerStatus == 2">
                                <img src="../../../assets/pause.png" alt="" class="status_img">
                                <span>暂停</span>
                            </div>
                            <div class="settle_status" v-if="information.customerStatus == 3">
                                <img src="../../../assets/settle.png" alt="" class="status_img">
                                <span>结清</span>
                            </div>
                            <div class="settle_status" v-if="information.customerStatus == 4">
                                <img src="../../../assets/settle.png" alt="" class="status_img">
                                <span>解保</span>
                            </div>
                            <div class="abnormal_status" v-if="information.customerStatus == 5">
                                <img src="../../../assets/abnormal.png" alt="" class="status_img">
                                <span>逾期</span>
                            </div>
                            <div class="extension_status" v-if="information.customerStatus == 6">
                                <img src="../../../assets/extension.png" alt="" class="status_img">
                                <span>展期</span>
                            </div>
                            <div class="noRead_status1" v-if="information.customerStatus == 7">
                                <img src="../../../assets/noRead.png" alt="" class="status_img">
                                <span>预警</span>
                            </div>
                            <div class="compensation_status" v-if="information.customerStatus == 8">
                                <img src="../../../assets/compensation.png" alt="" class="status_img">
                                <span>代偿</span>
                            </div>
                        </div>
                    </div>
                    <div class="d_f a_i_c m_t_20">
                        <div class="label ">项目编号：</div>
                        <div class="input d_f a_i_c">{{ information.projectNo }}</div>
                    </div>
                    <div class="d_f a_i_c m_t_20">
                        <div class="label ">当前任务：</div>
                        <div class="input d_f a_i_c task">{{ information.nodeName }}</div>
                    </div>
                    <div class="d_f a_i_c m_t_20">
                        <div class="label ">产品名称：</div>
                        <div class="input d_f a_i_c">{{ information.productName }}</div>
                    </div>
                    <div class="d_f a_i_c m_t_20">
                        <div class="label ">合作机构：</div>
                        <div class="input d_f a_i_c">{{ information.agencyName }}</div>
                    </div>
                    <div class="d_f a_i_c m_t_20">
                        <div class="label ">进件人：</div>
                        <div class="input d_f a_i_c">{{ information.submitter }}</div>
                    </div>
                    <div class="d_f a_i_c m_t_20">
                        <div class="label ">进件人电话：</div>
                        <div class="input d_f a_i_c">{{ information.submitterMobile }}</div>
                    </div>
                    <div class="d_f a_i_c m_t_20">
                        <div class="label ">业务部门：</div>
                        <div class="input d_f a_i_c">{{ information.deptName }}</div>
                    </div>
                    <div class="d_f a_i_c m_t_20">
                        <div class="label ">申请金额：</div>
                        <div class="input d_f a_i_c">{{ information.totalMoney || '0' }}</div>
                    </div>
                </div>
                <singleStrokeFiling></singleStrokeFiling>
            </div>
            <div class="right" v-if="information.nodeCategory == 1">
                <div class="d_f">
                    <div v-for="(item, index) in list" :key="index" class="tab d_f j_c_c a_i_c" @click="current = index"
                        :class="{ 'm_l_10': index > 0, 'active': current == index }">{{ item.name }} </div>
                </div>

                <div v-if="current == 0" class="form1">
                    <beforeInsurance></beforeInsurance>
                </div>
                <div v-if="current == 1" class="form1">
                    <businessInformation></businessInformation>
                </div>
            </div>
            <div class="right" v-if="information.nodeCategory == 2">
                <div class="d_f">
                    <div v-for="(item, index) in list1" :key="index" class="tab d_f j_c_c a_i_c"
                        @click="current = index" :class="{ 'm_l_10': index > 0, 'active': current == index }">{{
                        item.name }} </div>
                </div>

                <div v-if="current == 0" class="form1">
                    <beforeInsurance></beforeInsurance>
                </div>
                <div v-if="current == 1" class="form1">
                    <afterProtection></afterProtection>
                </div>
                <div v-if="current == 2" class="form1">
                    <businessInformation></businessInformation>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onBeforeMount, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { runTaskGet, runTaskStash, updateStatus, runTaskCustomer } from '../../../api/agent'
import { FormComponents } from '../../../components/formChildren/myComponents'
import { copy } from '../../../utils/date'
import { Message } from '../../../utils/resetMessage'
import { financingBatchHandleType } from '../../../type/agent'
import beforeInsurance from '../../../components/info/beforeInsurance.vue'//保前信息
import afterProtection from '../../../components/info/afterProtection.vue'//保后信息
import businessInformation from '../../../components//info/businessInformation.vue'//业务资料信息
export default defineComponent({
    name: '',
    components: {
        beforeInsurance, afterProtection, businessInformation
    },
    setup() {
        const data: financingBatchHandleType = reactive({
            vars: {},
            records: [],
            productId: '',
            projectId: '',
            model: {
                custom: {},
            },
            nodeObj: {
                id: '',
                name: ''
            },
            type: '1',
            information: {
                customerName: '',
                customerStatus: 0,
                projectNo: '',
                nodeName: '',
                productName: '',
                agencyName: '',
                submitter: '',
                submitterMobile: '',
                deptName: '',
                totalMoney: '',
                nodeId: '',
                productId: '',
                nodeCategory: 0
            },

            list: [
                {
                    name: '保前信息',
                    id: '1',
                },
                {
                    name: '业务资料',
                    id: '3',
                },
            ],
            list1: [
                {
                    name: '保前信息',
                    id: '1',
                },
                {
                    name: '保后信息',
                    id: '2',
                },
                {
                    name: '业务资料',
                    id: '3',
                },
            ],
            current: 0
        })
        const route = useRoute()
        const router = useRouter()
        onBeforeMount(() => {
            data.productId = route.query.productId as string
            data.projectId = route.query.projectId as string
            data.nodeObj.id = route.query.nodeId as string
            data.nodeObj.name = route.query.nodeName as string
            methods.getData()
            data.type = route.query.type as string
        })


        const itemRefs = ref()
        const methods = {
            getData() {
                // runTaskGet({ id: route.query.id as string, type: route.query.type as string, category: route.query.category as string }).then((res: any) => {
                //     data.vars = res.vars
                //     data.records = res.formCodes || []
                // })
                runTaskCustomer({ id: route.query.id as string, category: route.query.category as string }).then((res: any) => {
                    data.information = res
                    data.nodeObj = {
                        name: res.nodeName,
                        id: res.nodeId
                    }
                })
            },
            close() {
                router.go(-1)
            },
            save() {
                let arr = []
                itemRefs.value.map((item: any, index: number) => {
                    item.resultData().then((res: any) => {
                        arr.push(true)
                        data.model = Object.assign(res, data.model);
                    }).catch((err) => {
                        arr.push(false)
                    })
                })
                setTimeout(() => {
                    if (arr.every((em: any) => em) && arr.length == itemRefs.value.length) {
                        methods.submit()
                    }
                }, 300)
            },
            submit() {
                data.model.projectId = route.query.projectId as string
                runTaskStash({ id: route.query.id as string, vars: data.model, isBatch: 1 }).then(() => {
                    updateStatus({ ids: [route.query.id as string] }).then(() => {
                        Message({ type: 'success', message: '保存成功' })
                        router.go(-1)
                    })

                })
            }
        }
        return {
            ...toRefs(data),
            ...methods, FormComponents, itemRefs
        }
    }
})
</script>
<style scoped lang='scss'>
.index {
    width: 100%;
    height: calc(100% - 40px);
}

.left {
    width: 25%;
    height: 100%;
    overflow-y: auto;

    .box {
        background: linear-gradient(178deg, #F5F9FF 0%, #FFFFFF 62%);
        box-sizing: border-box;
        border: 1px solid;
        border-image: linear-gradient(168deg, rgba(155, 188, 235, 0.5) 1%, rgba(102, 142, 197, 0) 94%) 1;
        border-radius: 6px;
        box-shadow: 5px 5px 5px -2px rgba(9, 20, 29, 0.03);
        width: 100%;
        padding: 20px;
        width: 100%;

        .label {
            text-align: right;
            width: 100px;
            color: rgba(0, 0, 0, 0.4);
            font-size: 14px;
            display: block !important;
        }

        .input {
            background: linear-gradient(178deg, #F5F9FF 0%, #FFFFFF 62%);
            width: calc(100% - 130px);
            height: 32px;
            border-radius: 2px;
            background: #fff;
            padding: 0px 12px;
            color: rgba(0, 0, 0, 0.9);
            font-size: 14px;
        }

        .task {
            color: #1878FF !important;
        }
    }
}

.right {
    width: calc(75% - 10px);
    height: 100%;
    margin-left: 10px;
    ;
    border-radius: 6px;

    .tab {
        width: 128px;
        height: 53px;
        border-radius: 6px 6px 0px 0px;
        background: linear-gradient(173deg, #FFFFFF 12%, #F3F3F3 60%);
        box-shadow: 5px 5px 5px -2px rgba(9, 20, 29, 0.03);
        color: #86909C;
        font-size: 16px;
        cursor: pointer;
    }

    .active {
        background: linear-gradient(173deg, #F5F9FF 10%, #FFFFFF 60%) !important;
        color: #1B5ED1 !important;
        box-shadow: 5px 0px 5px -2px rgba(9, 20, 29, 0.03) !important;
    }

    .forms {
        width: calc(100% - 64px);
        height: calc(100% - 150px);
        background: #fff;
        box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
        padding: 1px 32px 24px 32px;
        overflow-y: auto;
    }

    .form1 {
        width: calc(100% - 64px);
        height: calc(100% - 80px);
        background: #fff;
        box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
        padding: 1px 32px 24px 32px;
        overflow-y: auto;
    }

    .content {
        width: calc(100% - 48px);
        margin-top: 10px;
        background: rgba(24, 120, 255, 0.02);
        border-radius: 0px 0px 6px 6px;
        padding: 12px 24px;

        .expand {
            color: #1878FF;
            font-size: 14px;
            margin-left: 8px;
            cursor: pointer;
        }

        .tips {
            color: rgba(0, 0, 0, 0.4);
            font-size: 0.75vw;
            margin-left: 5px;

            .num {
                color: red !important;
            }
        }

        .all {
            color: #1878FF;
            cursor: pointer;
            margin-right: 10px;
            font-size: 13px;
            width: 80px;
        }

        .cancelAll {
            color: #F53F3F;
            cursor: pointer;
            margin-right: 10px;
            font-size: 13px;
            width: 80px;
        }
    }

    .bottom {
        background: #fff;
        padding: 32px;
        width: calc(100% - 64px);
    }

}
</style>